<template>
  <scroll-view scroll-x class="new_product_recom">
    <view class="info">
      <image class="icon_img" src="../../../../static/icon/4.png"></image>
      <image class="commodity" src="../../../../static/test/1.png"></image>
      <p class="name otw">水星甲方</p>
      <p class="detail otw">刷刷基坑监测撒今飞凯达是</p>
      <button class="join_btn">参与抽奖</button>
    </view>
    <view class="info">
      <image class="commodity" src="../../../../static/test/1.png"></image>
      <text class="name">水星甲方</text>
      <text class="detail">刷刷基坑监测撒今飞凯达是</text>
      <button class="join_btn">参与抽奖</button> </view
    ><view class="info">
      <image class="commodity" src="../../../../static/test/1.png"></image>
      <text class="name">水星甲方</text>
      <text class="detail">刷刷基坑监测撒今飞凯达是</text>
      <button class="join_btn">参与抽奖</button> </view
    ><view class="info">
      <image class="commodity" src="../../../../static/test/1.png"></image>
      <text class="name">水星甲方</text>
      <text class="detail">刷刷基坑监测撒今飞凯达是</text>
      <button class="join_btn">参与抽奖</button>
    </view>
  </scroll-view>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.new_product_recom {
  margin-top: 20rpx;
  white-space: nowrap;
  background-color: #fff;
  border-radius: 30rpx;
  .info {
    background-size: 100% 100%;
    border-radius: 25rpx;
    position: relative;
    text-align: center;
    display: inline-block;
    width: 40%;
    overflow: hidden;
    margin-right: 1%;
    height: 400rpx;
    &:last-child {
      margin-right: unset;
    }
    .icon_img {
        width: 100rpx;
        height: 60rpx;
        position: absolute;
        right: 0;
        top: 20rpx;
        z-index: 1;
    }
    .commodity {
      position: absolute;
      width: 80%;
      height: 160rpx;
      top: 15%;
      left: 50%;
      transform: translateX(-50%);
    }
    .name {
      position: absolute;
      top: 57%;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
    }
    .detail {
      position: absolute;
      top: 68%;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
      font-size: 28rpx;
      color: #868686;
    }
    .join_btn {
      position: absolute;
      bottom: 5%;
      left: 50%;
      transform: translateX(-50%);
      line-height: 60rpx;
      border-radius: 60rpx;
      background: linear-gradient(180deg, #148DFF 0%, #6CC3FF 100%);
      color: #fff;
      font-size: 32rpx;
    }
  }
}
</style>